<!DOCTYPE html>
<html lang="en">
<head>
<title>Xochimilco</title>
<meta charset="utf-8">
<meta name="description" content="Place your description here" />
<meta name="keywords" content="put, your, keyword, here" />
<meta name="author" content="Templates.com - website templates provider" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
	src="http://info.template-help.com/files/ie6_warning/ie6_script.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript"
	src="js/AG_Foreigner_Light-Plain_400.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/jquery.faded.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
		 <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
		 <script type="text/javascript" src="js/ie_png.js"></script>
		 <script type="text/javascript">
				ie_png.fix('.png, ul.tabs li a, ul.tabs li a span, ul.tabs li a span, figure img');
		 </script>
<![endif]-->
<!--[if lt IE 9]>
		<script type="text/javascript" src="js/html5.js"></script>
	<![endif]-->

<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#mapa {
	width: 900px;
	height: 600px;
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyATFse6dj7EKAICGcmyS0OnJahe_kJWp2o&sensor=false">
    </script>
<script type="text/javascript">
      	var puntos = [];
	var unpunto = null;
	var map = null;
	var center  = new google.maps.LatLng(19.274085, -99.138347);
	
	function initialize() {       
		        var mapOptions = {
	                     center: new google.maps.LatLng(19.2547,-99.0711),
          		       zoom: 12,
	                     mapTypeId: google.maps.MapTypeId.ROADMAP,
	                     mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    }
        	};
         map = new google.maps.Map(document.getElementById("mapa"),
            mapOptions);
          
}

      
      function showXochimilco(  ){
              map.setCenter(center);
	var milpa = new google.maps.LatLng(19.190857, -99.02363);
 
	var markerMilpa = new google.maps.Marker({
    		position: milpa,
    		title:"Milpa Alta"
	});
	markerMilpa.setMap(map);

	var xochimilco = new google.maps.LatLng(19.274085, -99.138347);
 
	var markerXochimilco = new google.maps.Marker({
    		position: xochimilco,
    		title:"Xochimilco"
	});
	markerXochimilco.setMap(map);
        
        
	var iztapalapa = new google.maps.LatLng(19.357676, -99.092685);
	var markerIztapalapa = new google.maps.Marker({
    		position: iztapalapa,
    		title:"Iztapalapa"
	});
	markerIztapalapa.setMap(map);
	
	var tlahuac = new google.maps.LatLng(19.2625217, -99.00531005);
	var markerTlahuac = new google.maps.Marker({
    		position: tlahuac,
    		title:"Tlahuac"
	});
	markerTlahuac.setMap(map);
	

	
	  var paths = [milpa,
   xochimilco,
    iztapalapa, tlahuac];
    
	      	  var shape = new google.maps.Polygon({
    paths: paths,
    strokeColor: '#6D9C00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#A8F000',
    fillOpacity: 0.35
  });
	shape.setMap(map);
	
	}
	

    function hide(){
    	if(puntos){
    		for(p in puntos){
    			puntos[p].setMap(null);
    		}
    	}
    }


	function biodiversity(){
	 var icono1 = '<div>' + '<img src="imgs/icono-1.jpg" />' + '</div>';
 var icono2 = '<div>' + '<img src="imgs/icono-2.jpg" />' + '</div>';
 var icono3 = '<div>' + '<img src="imgs/icono-3.jpg" />' + '</div>';
 var icono4 = '<div>' + '<img src="imgs/icono-4.jpg" />' + '</div>';
 var icono5 = '<div>' + '<img src="imgs/icono-5.jpg" />' + '</div>';
  var infoAhuejote = new google.maps.InfoWindow({ content: icono1 });
 var infoAxolote = new google.maps.InfoWindow({ content: icono2 });
 var infoCanal = new google.maps.InfoWindow({ content: icono3 });
 var infoBosque = new google.maps.InfoWindow({ content: icono4 });
 var infoChichicastle = new google.maps.InfoWindow({ content: icono5 });
  var bio = 'imgs/icono-biodiversidad.png';
  
        map.setCenter(center);
	var tlahuac = new google.maps.Marker({
    			position: new google.maps.LatLng(19.2780917532996,-99.04449511572267),
    			map:map,
    			icon:bio,
	    		title:"Bosque de Tlahuac"
		});
		google.maps.event.addListener(tlahuac, 'click', function() {
		  				infoBosque.open(map,tlahuac);
					});
		//tlahuac.setMap(mapa);
		puntos.push(tlahuac);


	var laguna = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.265452469866425,-99.10929728552247),
		    		map:map,
		    		icon:bio,
			    	title:"Laguna del Toro"
			});
			google.maps.event.addListener(laguna, 'click', function() {
					  				infoAhuejote.open(map,laguna);
					});

		puntos.push(laguna);


	var canal = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.279063965535467,-99.10431910559083),
		    		map:map,
		    		icon:bio,
			    	title:"Canal de Cuemanco"
			});

google.maps.event.addListener(canal, 'click', function() {
		  				infoCanal.open(map,canal);
					});
					
		puntos.push(canal);

	var huetz = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.28878577048749,-99.09882594152833),
		    		map:map,
		    		icon:bio,
			    	title:"Lago Huetzalin"
			});
google.maps.event.addListener(huetz, 'click', function() {
		  				infoAxolote.open(map,huetz);
					});

		puntos.push(huetz);



	var acit = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.295509681201455,-99.09350444408147),
		    		map:map,
		    		icon:bio,
			    	title:"Lago Acitlalin"
			});
			google.maps.event.addListener(acit, 'click', function() {
					  				infoChichicastle.open(map,acit);
					});			
		puntos.push(acit);
}


	function culture(){
		 var icono1 = '<div>' + '<img src="imgs/SantaCrucitaAnalco.jpg" />' + '</div>';
 var icono2 = '<div>' + '<img src="imgs/SanJuanBautistaTlateuhchi.jpg" />' + '</div>';
 var icono3 = '<div>' + '<img src="imgs/ConcepcionMariaTlacoapa.jpg" />' + '</div>';
 var icono4 = '<div>' + '<img src="imgs/SanPedroTlalnahuac.jpg" />' + '</div>';
 var icono5 = '<div>' + '<img src="imgs/LaAsuncion.jpg" />' + '</div>';
 
  var infoAnalco= new google.maps.InfoWindow({ content: icono1 });
 var infoTlateuhchi = new google.maps.InfoWindow({ content: icono2 });
 var infoTlacoapa = new google.maps.InfoWindow({ content: icono3 });
 var infoTlalnahuac = new google.maps.InfoWindow({ content: icono4 });
 var infoAsuncion = new google.maps.InfoWindow({ content: icono5 });
  var church = 'imgs/Church.jpg';
	
        map.setCenter(center);
	var p1 = new google.maps.Marker({
    			position: new google.maps.LatLng(19.261178,-99.101315),
    			map:map,
    			icon:church,
	    		title:"Santa Crucita de Analco"
		});
		
				google.maps.event.addListener(p1, 'click', function() {
		  				infoAnalco.open(map,p1);
					});
		puntos.push(p1);


	var p2 = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.254108,-99.012871),
		    		map:map,
		    		icon:church,
			    	title:"San Juan Bautista Tlateuhchi"
			});

				google.maps.event.addListener(p2, 'click', function() {
		  				infoTlateuhchi.open(map,p2);
					});
		puntos.push(p2);


	var p3 = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.267133,-99.10408),
		    		map:map,
		    		icon:church,
			    	title:"La Concepción de María Tlacoapa"
			});

	google.maps.event.addListener(p3, 'click', function() {
		  				infoTlacoapa.open(map,p3);
					});
		puntos.push(p3);

	var p4 = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.257688,-99.10666),
		    		map:map,
		    		icon:church,
			    	title:"San Pedro Tlalnahuac"
			});
	google.maps.event.addListener(p4, 'click', function() {
		  				infoTlalnahuac.open(map,p4);
					});

		puntos.push(p4);



	var p5 = new google.maps.Marker({
		    		position: new google.maps.LatLng(19.268343,-99.102376),
		    		map:map,
		    		icon:church,
			    	title:"La Asunción Colhuacatzinco"
			});
			
	google.maps.event.addListener(p5, 'click', function() {
		  				infoAsuncion.open(map,p5);
					});			
		puntos.push(p5);
}


  function economics(){
		 var chinampa = 'imgs/chinampa.jpg';
		 var flor = 'imgs/flor.jpg';

		 var MercFl = '<div>'+
		                     '<img src="imgs/mercado.jpg" />'+
		 					'</div>';

		 var VivNeza = '<div>'+
		                     '<img src="imgs/viveroNeza.jpg" />'+
		 					'</div>';
		 var LagToro = '<div>'+
		                     '<img src="imgs/LagunaToro.jpg" />'+
		 					'</div>';

		 var LagXal = '<div>'+
		                     '<img src="imgs/xaltocan.jpg" />'+
		 					'</div>';
		 var LagCal = '<div>'+
		                     '<img src="imgs/caltongo.jpg" />'+
		 					'</div>';

		 var infoMercado = new google.maps.InfoWindow({
		     content: MercFl });

		 var infoVivero = new google.maps.InfoWindow({
		     content: VivNeza});

		 var infoToro = new google.maps.InfoWindow({
		     content: LagToro});

		 var infoXaltocan = new google.maps.InfoWindow({
		     content: LagXal});

		 var infoCal = new google.maps.InfoWindow({
		     content: LagCal});
		     
		     
        map.setCenter(center);
        var merc = new google.maps.LatLng(19.29846649,-99.099212179);
	    var merc2 = new google.maps.LatLng(19.285828,-99.075866);
	    var merc3 = new google.maps.LatLng(19.2555627,-99.09983538);
	    var merc4 = new google.maps.LatLng(19.26048966,-99.096723);
	    var merc5 = new google.maps.LatLng(19.265270,-99.108567);


	 var marker1 = new google.maps.Marker({
	  		     		position: merc,
	  		     		map:map,
	  		     		title:"Chinampas",
	  		     		icon: flor
	   			});

		google.maps.event.addListener(marker1, 'click', function() {
  				infoMercado.open(map,marker1);
			});
		puntos.push(marker1);


	  		 var marker2 = new google.maps.Marker({
	  		     		position: merc2,
	  		     		map:map,
	  		     		title:"Chinampas",
	  		     		icon:chinampa
	   			});

		google.maps.event.addListener(marker2, 'click', function() {
  				infoVivero.open(map,marker2);
			});
		puntos.push(marker2);

	   		 var marker3 = new google.maps.Marker({
	   		     		position: merc3,
	   		     		map:map,
	   		     		title:"Chinampas",
	   		     		icon:chinampa
	   			});
		google.maps.event.addListener(marker3, 'click', function() {
  				infoXaltocan.open(map,marker3);
			});
	puntos.push(marker3);

	   		 var marker4 = new google.maps.Marker({
	  		     		position: merc4,
	  		     		map:map,
	  		     		title:"Chinampas",
	  		     		icon:chinampa
	   			});
		google.maps.event.addListener(marker4, 'click', function() {
  				infoCal.open(map,marker4);
			});
	  puntos.push(marker4);

	   		 var marker5 = new google.maps.Marker({
	   		     		position: merc5,
	   		     		map:map,
	   		     		title:"Chinampas",
	   		     		icon:chinampa
	   			});
		google.maps.event.addListener(marker5, 'click', function() {
  				infoToro.open(map,marker5);
			});
	   	puntos.push(marker5);

  	 }

    function showEconomics(){
    	hide();
    	economics();
    }

    function showCulture(){
    	hide();
    	culture();
    }

    function showBiodiversity(){
    	hide();
    	biodiversity();
    }	
	
    </script>
</head>
<body id="page1" onload="initialize();">
	<div class="wrap">
		<div class="ic">
			<!-- HLinks -->
		</div>
		<!-- header -->
		<header>
			<div class="container">
				<h1>
					<a href="index.html">Xochimilco <span></span></a>
				</h1>
				<nav>
					<ul>
						<li><a href="index.html" class="active"><span><span>Inicio</span></span></a></li>
						<li><a href="."><span><span>¿Quiénes somos?</span></span></a></li>
						<li><a href="."><span><span>Participantes</span></span></a></li>
						<li><a href="."><span><span>Galería</span></span></a></li>
						<li><a href="."><span><span>Contáctanos</span></span></a></li>
					</ul>
				</nav>
				<ul class="tabs">
					<li><a href="#tab1" onclick="showXochimilco();"><span><span>Xochimilco</span></span></a></li>
					<li><a href="#tab1" onclick="showBiodiversity();"><span><span>Biodiversidad</span></span></a></li>
					<li><a href="#tab2" onclick="showCulture();"><span><span>Cultura</span></span></a></li>
					<li><a href="#tab3" onclick="showEconomics();"><span><span>Economía</span></span></a></li>
					<li><a href="#tab5"><span><span>Agua</span></span></a></li>
				</ul>
			</div>
		</header>
		<div class="container">
			<!-- content -->
			<section id="content">
				<div id="mapa"></div>
			</section>
		</div>
	</div>

	<!-- footer -->
	<footer>
		<div class="container">
			<div class="inside"></div>
		</div>
	</footer>
	<script type="text/javascript"> </script>
</body>
</html>
